<template>
	<el-dialog :close-on-click-modal="false" :title="`${mode === 'add' ? '新增' : '修改'}客户信息`" width="700px" v-model="visible" @confirm="confirm"
		@cancel="visible = false" @close="closeDialog">
		<div class="formData">
			<el-form :model="formData" ref="ruleForm" label-width="120px" :rules="rules">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="客户姓名" prop="customerName">
							<el-input v-model="formData.customerName" placeholder="请填写客户姓名" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="客户类型" prop="type">
							<el-select v-model="formData.type" placeholder="请选择客户类型">
								<el-option v-for="item in selects.type" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
							<!-- <Select :selectData="options.typeList" v-model:value="formData.type" /> -->
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="联系人姓名" prop="contacts">
							<el-input v-model="formData.contacts" placeholder="请填写联系人姓名" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="tel">
							<el-input v-model="formData.tel" placeholder="请填写联系电话" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="纳税人识别号" prop="tin" v-if="formData.type == 2">
							<el-input v-model="formData.tin" placeholder="请填写纳税人识别号" />
						</el-form-item>

						<el-form-item label="身份证号" prop="idNumber" v-else-if="formData.type == 1">
							<el-input v-model="formData.idNumber" placeholder="请填写身份证号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系地址" prop="address">
							<el-input v-model="formData.address" placeholder="请填写联系地址" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="confirm">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import {
		ElMessage,
		ElMessageBox,
		ElNotification
	} from "element-plus";
	import api from '@/api/basicData/customer/index'
	const emit = defineEmits(['callback'])

	const selects = ref({
		type: [
			{label:'个人',value:1},
			{label:'企业',value:2}
		]
	})

	const visible = ref(false)
	const mode = ref('add')
	const row = ref({})
	const formData = ref({
      customerName:'',
      tin:'',
      idNumber:'',
      contacts:'',
      tel:'',
      address:'',
	  type:2
    })
	const ruleForm = ref({})
	//验证身份证号
	const validateIdCard = (rule, value, callback) => {
		if (!value) {
			return callback()
		}
		if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
			callback(new Error('身份证号格式不正确'));
		} else {
			callback();
		}
	}
	//验证手机号
	const validatePhone = (rule, value, callback) => {
		if (!value) {
			return callback()
		}
		if (!/^1[3456789]\d{9}$/.test(value)) {
			callback(new Error('手机号格式不正确'));
		} else {
			callback();
		}
	}
	const rules = ref({
		customerName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		tin: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		idNumber: [{
				required: true,
				message: '不能为空',
				trigger: 'blur'
			},
			{
				validator: validateIdCard,
				trigger: 'blur'
			}
		],
		tel: [{
				required: true,
				message: '不能为空',
				trigger: 'blur'
			},
			{
				validator: validatePhone,
				trigger: 'blur'
			}
		]
	})
	// 展示
	const show = params => {
		console.log(params);
		visible.value = true
		mode.value = params?.mode || 'add'
		if (mode.value === 'edit') {
			row.value = params.row
			editInit()
		}
	}
	// 编辑
	const editInit = async () => {
		const {
			data
		} = await api.getDetailById({id:row.value.id})
		formData.value = {
			...data
		}
	}
	// 确认
	const confirm = () => {
		ruleForm.value.validate(valid => {
			if (valid) {
				let request
				if (mode.value === 'add') {
					request = api.save
					delete formData.value.id
				} else {
					request = api.save
				}
				request(formData.value).then(res => {
					if (res.code == '200') {
						ElMessage.success('保存成功')
						visible.value = false
						emit('callback')
					} else {
						ElMessage.error(res.msg)
					}
				})
			} else {
				ElMessage.warning('请完善表单信息！')
			}
		})
	}

	// 重置
	const closeDialog = () => {
		nextTick(() => {
			visible.value = false
			ruleForm.value.resetFields()
		})
	}
	defineExpose({
		show
	})
</script>